<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--<head>-->
<!--    &lt;!&ndash; 必要的标签 &ndash;&gt;-->
<!--    <meta charset="utf-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
<!--    &lt;!&ndash; Bootstrap CSS &ndash;&gt;-->
<!--    <link crossorigin="anonymous" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" href="https://lib.baomitu.com/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">-->
<!--</head>-->
<head th:replace="Layouts::header"></head>

<body>

<!--<nav class="navbar navbar-expand-lg navbar-dark bg-dark">-->
<!--    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">-->
<!--        <span class="navbar-toggler-icon"></span>-->
<!--    </button>-->
<!--    <a class="navbar-brand" href="#">项目IO</a>-->

<!--    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">-->
<!--        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">-->
<!--            <li class="nav-item active">-->
<!--                <a class="nav-link" href="#">主页</a>-->
<!--            </li>-->
<!--            <li class="nav-item">-->
<!--                <a class="nav-link" href="#">学生</a>-->
<!--            </li>-->
<!--            <li class="nav-item">-->
<!--                <a class="nav-link" href="#">项目</a>-->
<!--            </li>-->
<!--        </ul>-->

<!--    </div>-->
<!--</nav>-->



<nav th:replace="layouts::navbar"></nav>

<div class="container">
    <h3>主面板</h3>
    <p th:text="${versionNumber}"></p>
    <hr>


    <h4>当前项目</h4>
    <div class="row">
        <div class="col-md-6">
    <table class="table table-bordered table-striped">
    <thead class="thead-dark">

    <tr>
        <th>项目名称</th>
        <th>项目状态</th>

    </tr>
    </thead>
    <tbody>
    <tr th:each="aProject : ${projects}">
        <td th:text="${aProject.name}"></td>
        <td th:text="${aProject.stage}"></td>

    </tr>
    </tbody>
</table>
</div>
    <div class="col-md-4">
        <canvas id="myPieChart" height="50" width="50" ></canvas>
        <script>
            let chartData = "[[${projectStatusData}]]"
        </script>
    </div>

</div>

    <h4>当前学生</h4>
    <div class="row">
        <div class="col-md-6">
    <table class="table table-bordered table-striped">
        <thead class="thead-dark">
        <tr>
            <th>学生姓名</th>
            <th>微信号</th>
            <th>项目个数</th>

        </tr>
        </thead>
        <tbody>
        <tr th:each="aStudent : ${studentProjects}">
            <td th:text="${aStudent.name}"></td>
            <td th:text="${aStudent.wechatId}"></td>
            <td th:text="${aStudent.projectCount}"></td>

        </tr>
        </tbody>
    </table>
</div>
    </div>
</div>

<script type="text/javascript" th:src="@{js/myChart.js}"></script>
</body>

</html>
